<template>
    <div class="Login_set">
        <header>
        <!-- 返回 -->
        <img @click='Lo_set_back' class="Lo_set_back" src="../../../static/imgs/return.png">
        <p>设置</p>

    </header>

    <main>
        <section>
            <dl class="sess" v-for="x,index in xxx" @click="aaa(index)">
            {{x.text}}
                <dd><b>消息通知</b></dd>
                <dd></dd>
                <dt class="down">
                  <mt-switch></mt-switch>
                </dt>
                
            </dl>
            <router-link tag='span' to='Lo_set_password'>
                <dl class="Lo_set_to_password">             
                    <dd><b>设置密码</b></dd>
                    <dd></dd>
                    <dt><img src="../../../static/imgs/index_acac.png"></dt>
                </dl>
            </router-link>

            <router-link tag='span' to='Lo_userServeAgreement'>
                <dl class="protocol_details Lo_set_to_userServe">               
                    <dd><b>用户服务协议</b></dd>
                    <dd></dd>
                    <dt><img src="../../../static/imgs/index_acac.png"></dt>
                </dl>
            </router-link>


            <template>
    <i-switch v-model="switch1" @on-change="change"  size="100px"></i-switch>
</template>
<Icon type="arrow-right-a" size='100px'></Icon>
<i class="ivu-icon ivu-icon-checkmark"></i>

            <router-link tag='dl' class="quit" to='Lo_enroll'>
                <p><b>退出登录</b></p>  
            </router-link>
        </section>
        <!-- <mt-swipe :auto="4000" style='height:400px'>
                <mt-swipe-item>1</mt-swipe-item>
                <mt-swipe-item>2</mt-swipe-item>
                <mt-swipe-item>3</mt-swipe-item>
        </mt-swipe> -->

    </main>


    </div>
</template>
<script>

     export default {
          name:'Login_set',
          data(){
            return {
              xxx: {text:'ghjgh'}
            }
          },
          methods:{
              Lo_set_back:function(){
                  this.$router.go(-1)
              },
              aaa(){
                console.log(this.$emit)
                this.$emit('item-select',1111);
              }

          }

    }
</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}

html,body{
  height:100%;
  background:#f0f2f5;
}

header{
   background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .PxToRem(height,88);
    .PxToRem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .PxToRem(width,55);
        .PxToRem(height,53);
      }
}

section{
   
  .quit{
    justify-content:center;
    .PxToRem(font-size,40);
    .PxToRem(margin-top,300);
    p{
      .PxToRem(width,500);
      .PxToRem(height,100);
      background:#1cc6a3;
      text-align: center;
      color:white;
      .PxToRem(line-height,100);
      .PxToRem(border-radius,80);

    }
  }
  dl{
    .Flex;
    .PxToRem(height,130);
    padding:0 3%;
    background:#ffffff;
    border-bottom:1px solid #ccc;
    .PxToRem(font-size,35);
    color:#222222;
    justify-content:space-between;
    align-items:center;
    dd{
        
    }
    .down{
      .layui-form-switch{
          .PxToRem(border-radius,50);
          .PxToRem(width,140);
          .PxToRem(height,60);
          }
          .layui-form-onswitch{
          .PxToRem(border-radius,50);
          .PxToRem(width,140);
          .PxToRem(height,60);
          }
          .layui-form-switch i{
               .PxToRem(width,60);
               .PxToRem(height,60);
                .PxToRem(border-radius,60);
                top: 0;
                left: 0;
          }
          .layui-form-switch em{
              .PxToRem(font-size,35);
              .PxToRem(top,20);
              .PxToRem(right,20);
          } 
      }
        
    }
  
}


</style>









